<!--
 * @Description: 
 * @Date: 2023-12-20 14:44:03
 * @LastEditTime: 2024-03-04 14:11:44
-->
<template>
  <div class="dbxxFigure">
    <!-- <div>任免登记</div> -->
    <el-row :gutter="4" style="padding: 10px">
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="small"
        label-width="0px"
        label-position="left"
        :border="true"
      >
        <el-col style="padding: 10px">
          <el-form-item style="margin-left: 0">
            <el-button class="tabs" type="danger" @click="agree"
              >同意</el-button
            >
            <el-button class="tabs" type="warning" @click="reject"
              >驳回</el-button
            >
          </el-form-item>
        </el-col>
        <!-- :labelStyle="{width: '123px'}" :contentStyle="{width:'42%'}" -->
        <el-descriptions
          :column="3"
          border
          size="mini"
          style="margin-top: 10px"
          :labelStyle="{ width: '220px' }"
        >
          <el-descriptions-item label="审议议题" :span="3">
            <el-input
              id="input"
              v-model="formData.eventTitle"
              placeholder="请输入审议议题"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-descriptions-item>
          <el-descriptions-item label="议题类型">
            <el-select
              id="input"
              v-model="formData.eventType"
              placeholder="请选择议题类型"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in dict.type.yitileixing"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-descriptions-item>
          <!--  -->
          <el-descriptions-item label="选择工委">
            <el-select
              id="input"
              v-model="formData.procUserId"
              placeholder="请选择选择工委"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in workingCommitteeOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-descriptions-item>
          <el-descriptions-item label="申请日期">
            <el-date-picker
              id="input"
              v-model="formData.eventCreateTime"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :style="{ width: '100%' }"
              placeholder="请选择日期选择"
              clearable
            ></el-date-picker>
          </el-descriptions-item>
          <!--  -->
          <el-descriptions-item label="议题内容" :span="3">
            <el-input type="textarea" v-model="formData.eventDetail"></el-input>
          </el-descriptions-item>
          <!--  -->
          <el-descriptions-item label="附件信息" :span="3">
            <file-upload
              :formData="formData"
              url="/dev-api/system/user/profile/avatar/local"
            />
          </el-descriptions-item>
        </el-descriptions>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import FileUpload from "@/components/FileUploadShiXiang";
import { userListByRoleId } from "@/api/majorIssues/shixiang.js";
import { agree, reject } from "@/api/majorIssues/shixiang";
export default {
  components: {
    FileUpload,
  },
  props: {
    formData: {
      type: Object,
      default: {},
    },
  },
  dicts: ["yitileixing"],
  data() {
    return {
      // 选择工委的下拉框
      workingCommitteeOptions: [],
      // formData: {},
      showType: "type1",
      rules: {
        field102: [
          {
            required: true,
            message: "请选择下拉选择",
            trigger: "change",
          },
        ],
        field103: [
          {
            required: true,
            message: "请输入单行文本",
            trigger: "blur",
          },
        ],
        field104: [],
        field105: [
          {
            required: true,
            message: "请选择提请任免部门",
            trigger: "change",
          },
        ],
        field107: [
          {
            required: true,
            message: "请选择日期选择",
            trigger: "change",
          },
        ],
      },
      field102Options: [
        {
          label: "选项一",
          value: 1,
        },
        {
          label: "选项二",
          value: 2,
        },
      ],
      field105Options: [
        {
          label: "选项一",
          value: 1,
        },
        {
          label: "选项二",
          value: 2,
        },
      ],
      radio: 1,
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getOptions();
  },
  methods: {
    agree() {
      agree({
        ...this.formData,
      })
        .then((res) => {
          this.$emit("callback");
        })
        .finally((res) => {
          this.$emit("callback");
        });
    },
    reject() {
      reject({
        ...this.formData,
      })
        .then((res) => {
          this.$emit("callback");
        })
        .finally((res) => {
          this.$emit("callback");
        });
    },
    getOptions() {
      // 选择工委的下拉框
      // 根据角色id查询用户。
      // listRole({pageSize:1000,pageNum:1}).then(res=>{
      userListByRoleId({ roleId: 1 }).then((res) => {
        this.workingCommitteeOptions = res.data.users.map((item) => {
          return {
            value: item.userId,
            label: item.userName,
          };
        });
      });
    },
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
    changeType(v) {
      this.showType = v;
    },
  },
};
</script>

<style lang="scss" scoped>
.tabs {
  margin-left: 10px;
  width: 150px;
}

.fujian {
  display: flex;
  align-content: center;
  justify-content: space-between;
}

::v-deep.el-descriptions .is-bordered {
  table-layout: fixed;
}
::v-deep #input {
  border: none;
}
</style>
